<template>
  <div>
    <headerComponent></headerComponent>
    <div class="login">
      <el-card class="box-card">
        <el-tabs class="login-tab" v-model="activeName">
          <el-tab-pane label="短信登录" name="first">
            <PhoneLogin></PhoneLogin>
          </el-tab-pane>
          <el-tab-pane label="密码登录" name="second">
            <PasswordLogin></PasswordLogin>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <footerComponent></footerComponent>
  </div>
</template>

<script>
import PhoneLogin from "@/views/login/components/PhoneLogin";
import PasswordLogin from "@/views/login/components/PasswordLogin";
import headerComponent from '@/components/headerComponent/index'
import footerComponent from '@/components/footerComponent/index'

export default {
  name: "index",
  data() {
    return {
      activeName: 'first'
    };
  },
  components: {
    headerComponent,
    footerComponent,
    PhoneLogin,
    PasswordLogin
  }
}
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.login .box-card {
  width: 400px;
}

.login-tab .el-tabs__nav-wrap::after {
  height: 0px;
}

.login-tab .el-tabs__item {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
}

.login-tab .el-tabs__item.is-active {
  font-weight: 600;
  color: #121212;
  font-size: 16px;
}

.login-tab .el-tabs__active-bar {
  height: 2px;
  background-color: #409EFF;
}

.login .box-card .el-card__body {
  padding: 0 20px 20px 20px;
}
</style>
<style scoped>
.login {
  min-height: calc(100vh - 120px);
  position: relative;
  background-image: url("../../assets/background/bg.jpg");
}

.login .box-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
